import styles from './index.less';
import { Link, history, useDispatch } from 'umi';
import useConnect from '../hooks/useConnect';
import { useEffect } from 'react';

export default function IndexPage() {
  //   const user = useSelector(({ user }) => {
  //     return user;
  //   });
  //   const app = useSelector(({ app }) => app);
  //   const test = useSelector(({ test }) => test);
  const { obj: user, list } = useConnect('user');
  const { app, test } = useConnect(['app', 'test']);
  const dispatch = useDispatch();
  useEffect(() => {
    const res = dispatch({
      type: 'user/getList',
      payload: {
        id: 1,
      },
    });
  }, []);

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
      <p>username: {user.username}</p>
      <p>age: {user.age}</p>
      <button
        onClick={() => {
          //   dispatch({
          //     type: 'user/setUsername',
          //     payload: {
          //       name: '小黑',
          //     },
          //   });
          //   dispatch({
          //     type: 'user/updateStateProps',
          //     payload: {
          //       name: 'obj', // state下的属性值
          //       value: {
          //         username: '小黑', // state.obj下的属性值
          //       },
          //     },
          //   });

          dispatch({
            type: 'user/overrideStateProps',
            payload: {
              obj: { username: '小红', age: 30 },
            },
          });
        }}
      >
        修改用户名
      </button>
      <button
        onClick={() => {
          dispatch({
            type: 'user/setAge',
            payload: {
              age: 17,
            },
          });
        }}
      >
        修改年龄
      </button>
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.proName}</li>
        ))}
      </ul>
      {/* 声明式导航 */}
      <Link to={'/test'}>test</Link>
      {/* 编程式导航 */}
      <button
        onClick={() => {
          history.push({
            pathname: '/detail/1',
            query: {
              name: '传智播客',
            },
          });
        }}
      >
        to detail
      </button>
    </div>
  );
}
